<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <toolTreeVue
          :node-data="company"
          :is-root="false"
          @opendialog="opendialog"
          @getDepart="getDepart"
          @editdialog="editdialog"
        />
        <el-row>
          <el-col>
            <el-tree
              :data="departs"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <!-- #插槽的名字=“变量” -->
              <!-- node是el-tree偏底层一点的节点信息 -->
              <!-- data是我们提供的数据层面的信息 -->
              <template #default="{ data }">
                <!-- el-tree的宽度，默认是以内容撑开的 -->
                <toolTreeVue
                  :node-data="data"
                  @opendialog="opendialog"
                  @getDepart="getDepart"
                  @editdialog="editdialog"
                />
              </template>
            </el-tree>
          </el-col>
        </el-row>
      </el-card>
      <addDepartVue
        ref="addDepartVue"
        :add-dialog-depart.sync="dialogVisible"
        :node-data="nodeData"
        :departs-list="departsList"
        @getDepart="getDepart"
      />
    </div>
  </div>
</template>
<script>
import toolTreeVue from './components/tool-tree.vue'
import addDepartVue from './components/add-depart.vue'
import { getDepartmentListApi } from '@/api/departments'
import { transListToTreeData } from '@/utils'

export default {
  components: {
    toolTreeVue,
    addDepartVue
  },
  data() {
    return {
      // 数据里面，默认的标题字段是label，默认的儿子children

      departs: [], // 树形结构数据
      departsList: [], // 原始列表数据
      company: {
        name: '',
        manager: '管理员',
        id: '' // 添加一级部门，一级部门的爹要给空字符串
      },
      // defaultProps改变树形结构的数据的属性（键）
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false, // 添加子部门弹窗状态//默认关闭
      nodeData: {}, // 当前部门
      loading: false
    }
  },
  async created() {
    this.getDepart()
  },
  methods: {
    // 传递给 data 属性的数组中该节点所对应的对象
    // 节点对应的 Node
    // 节点组件本身
    handleNodeClick(data, data1, data2) {
      console.log(data, data1, data2)
    },
    // 对接口返回的部门列表，进行二次加工（树形数据）
    // const deptsList = this.transListToTreeData(data.depts, '')
    // transListToTreeData(data, value) {
    //   const arr = []
    //   data.forEach((item) => {
    //     // 想筛选第一级数据
    //     // item第一次遍历pid是空字符串
    //     // 还要找二级，这时就需要传递item.id来和pid比较
    //     if (item.pid === value) {
    //       const children = this.transListToTreeData(data, item.id)
    //       if (children.length > 0) {
    //         item.children = children
    //       }
    //       arr.push(item)
    //     }
    //   })
    //   return arr
    // },
    // 打开弹层
    opendialog(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      // 打开弹层请求负责人列表
      this.$nextTick(() => {
        this.$refs.addDepartVue.getLeaderList()
      })
      // 打开弹层请求部门详情
      // this.$nextTick(() => {
      //   this.$refs.addDepartVue.getDepartment()
      // })
    },
    editdialog(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      // 打开弹层请求负责人列表
      this.$nextTick(() => {
        this.$refs.addDepartVue.getLeaderList()
      })
      // 打开弹层请求部门详情
      this.$nextTick(() => {
        this.$refs.addDepartVue.getDepartment()
      })
    },
    // 关闭弹层
    // closeDialog() {
    //   this.dialogVisible = false
    // },
    // 获取部门列表数据
    async getDepart() {
      this.loading = true
      const { data } = await getDepartmentListApi()
      // 公司名赋值
      this.company.name = data.companyName
      // 存储原始数据，做校验部门编码和名称使用
      this.departsList = data.depts
      // 调用递归方法接收处理好的数据
      // 第一次调用过滤出一级部门，所以第二个参数传空字符串
      const deptsList = transListToTreeData(data.depts, '')
      // const deptsList = this.transListToTreeData(data.depts, '')
      // 处理好的树形数据给 el-tree 组件使用
      this.departs = deptsList

      this.loading = false
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
<style scoped lang="scss">
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
